Commerce Stream Practicals

Std 12th IT Subject - Skill Oriented Practical (Commerce Stream)

SOP 3: Create Interlinked Webpages with External Stylesheet

The first webpage will accept the name of the traveller, date of travel , telephone number . It also has submit button as an image .
The second webpage has information about the name of transporter, time , seat no and destination displayed one below the other in the form of unordered list as

Name of transporter – Air Asia
Time - 09:30 am
Seat no – B39
Destination - Delhi

Both pages should be interlinked. Create external stylesheet with relevant tags.

Source Code: Form.html

<!doctype html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="Style.css">
    <title>Applicaiton Form</title>
</head>
<body>
    <h1>Application Form</h1>
    <form>
        Enter Your Name: <input type="text" name="t1"><br><br>
        Select Date of Travel: <input type="date" name="d1"><br><br>
        Enter Contact No: <input type="tel" pattern="[0-9]{2}-[0-9]{10}" placeholder="00-0000000000" name="t2"><br>
        <input type="image" src="Submit.png" width="100" height="100"><br><br>
        <a href="Details.html">Details</a>
    </form>
</body>
</html>

Source Code: Details.html

<!doctype html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="Style.css">
    <title>Applicaiton Form</title>
</head>
<body>
    <h1>Detials</h1>
    <ul>
        <li>Name of transporter - Air Asia</li>
        <li>Time - 09:30 am</li>
        <li>Seat no - B39</li>
        <li>Destination - Delhi</li>
    </ul>
    <a href="Form.html">Applicaiton Form</a>
</body>
</html>

Program Code (style.css)

h1 {
  text-align: center;
  background-color: blue;
  color: white;
  padding: 10px;
}

SOP 3: Create Interlinked Webpages with External Stylesheet

Source Code: Form.html

Source Code: Details.html

Program Code (style.css)

Live Preview